import type React from 'react'
import './index.scss'

type propsT = {
    placeholder?:string,
    onChange?:Function,
    type?:string,
    id?:string,
    children?:React.ReactNode,
    className?:string,
    value?:string,
    rows?:number,
    cols?:number,
    resize?:'none'|'both'|'horizontal'|'vertical',
    height?:string,
    onEnter?:Function,
}

function MyInput(props:propsT){
    function handleChange(e:React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>){
        if(props.onChange){
            props.onChange(e.target.value,e.target.id)
        }
    }

    function handleKeyDown(e:React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>){
        if(e.key === 'Enter' && props.onEnter){
            e.preventDefault()
            props.onEnter(props.value)
        }
    }
    return (
        <div className='myInput_input_wrapper'>
            {props.type=='textarea'?
            <textarea 
                className={props.className} 
                id={props.id} 
                value={props.value} 
                onChange={(e)=>handleChange(e)} 
                placeholder={props.placeholder}
                rows={props.rows}
                cols={props.cols}
                style={{resize:props.resize||'vertical',height:props.height+'px'}}
            >{props.children}</textarea>
            :<input 
                className={props.className} 
                onChange={(e)=>handleChange(e)} 
                type={props.type} 
                id={props.id} 
                placeholder={props.placeholder}
                value={props.value}
                style={{height:props.height+'px'}}
                onKeyDown={(e)=>handleKeyDown(e)}
            />}
            {props.children}
        </div>
    )
}

export default MyInput